<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现下拉框多选功能</title>
    <meta name="robots" content="noindex, nofollow"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <link rel="stylesheet" href="../../js/docs/css/bootstrap-4.5.2.min.css" type="text/css">
    <link rel="stylesheet" href="../../js/docs/css/bootstrap-example.min.css" type="text/css">
    <link rel="stylesheet" href="../../js/docs/css/prettify.min.css" type="text/css">
    <link rel="stylesheet" href="../../js/docs/css/fontawesome-5.15.1-web/all.css" type="text/css">

    <script type="text/javascript" src="../../js/docs/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="../../js/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
    <script type="text/javascript" src="../../js/docs/js/prettify.min.js"></script>

    <link rel="stylesheet" href="../../js/dist/css/bootstrap-multiselect.css" type="text/css">
    <script type="text/javascript" src="../../js/dist/js/bootstrap-multiselect.js"></script>

    <script src="../../js/util/ajaxFactory.js"></script>
    <script src="../../js/util/crudVueFactory.js"></script>
    <script src="../../js/util/pageMe.js"></script>
    <script src="../../js/config/config.js"></script>

    <script src="../../js/vue/vue.min.js"></script>
    <script type="text/javascript">
$(document).ready(function () {
	initSelectBox();
	$("#BroadType").multiselect({
   		header : true,
   		height : 175,
   		minWidth : 200,
   		classes : '',
   		noneSelectedText : "==请选择==",
   		checkAllText : "全选",
   		uncheckAllText : '全不选',
   		selectedText : '# 选中',
   		selectedList : 2,
   		show : null,
   		hide : null,
   		autoOpen : false,
   		multiple : true,
   		position : {},
   		appendTo : "body",
   		menuWidth : null
   	});
 });
function initSelectBox(){
    $.ajaxSettings.async = false;
 	$.post(basePath + '/teacher/getTeacher', function(data) {
	//	var result = eval("(" + data + ")");
			$("#BroadType").empty();
			var html = '';
			for (var i = 0; i < data.data.length; i++) {
				html += '<option value="'+data.data[i].id+'">' + data.data[i].name + '</option>'
			}
			$("#BroadType").append(html);

		});
 }
 // 插件实例
        $(document).ready(function () {
          $("#BroadType").multiselect();
          // 点击事件获取所有选中option的value值
          $("#btn").click(function () {
          var name = $("#name").val();
          alert(name);
            var selectValueStr = [];
            $("#BroadType option:selected").each(function () {
              selectValueStr.push($(this).val());
            })
            console.log(selectValueStr.join());
            var teacherId = selectValueStr.join();
           // alert(JSON.stringify(selectValueStr));
            $z.ajaxPost({
                  url: basePath + '/student/addStudent',
                  data: {
                   teacherId: teacherId,
                   name: name
                  },
                  success: function (data) {

                  }
            })
        })
   })

    </script>

</head>

<body>
学生姓名:<input type="text" id="name"/><br>
教师：<select id="BroadType" class="selectpicker show-tick form-control" multiple data-live-search="false">
</select>
<button id="btn">提交</button>
　　<select id='checkedLevel' style="width:120px;height:28px;" multiple="multiple">
    　　　　<option value="1">选项1</option>
    　　　　<option value="2">选项1</option>
    　　　　<option value="3">选项1</option>
    　　　　<option value="4">选项1</option>
    　　　　<option value="5">选项1</option>
    　　　　<option value="6">选项1</option>
    　　　　<option value="7">选项1</option>
    　　</select>
<div>
    <select  multiple="true">
        <option value="1">aaaa</option>
        <option value="2">bbbb</option>
        <option value="3">cccc</option>
        <option value="4">dddd</option>
        <option>eeee</option>
        <option>ffff</option>
    </select>
</div>
</body>

</html>